﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Set_DeskTop.aspx.cs" Inherits="ZX.WebApp.DeskTop.Set_DeskTop" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>自定义桌面</title>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    <link rel="stylesheet" type="text/css" href="../scripts/yui_2.9.0/build/fonts/fonts-min.css" />
    <link rel="stylesheet" type="text/css" href="../scripts/yui_2.9.0/build/button/assets/skins/sam/button.css" />
    <link rel="stylesheet" type="text/css" href="../scripts/yui_2.9.0/build/container/assets/skins/sam/container.css" />
    <script type="text/javascript" src="../scripts/yui_2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="../scripts/yui_2.9.0/build/element/element-min.js"></script>
    <script type="text/javascript" src="../scripts/yui_2.9.0/build/button/button-min.js"></script>
    <script type="text/javascript" src="../scripts/yui_2.9.0/build/container/container-min.js"></script>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.json-2.2.js" type="text/javascript"></script>
    <style>
        body
        {
            margin: 0px;
            padding: 0px;
            font-size: 12px;
            text-align: center;
        }
        body > div
        {
            text-align: center;
            margin-right: auto;
            margin-left: auto;
        }
        .content
        {
            width: 100%;
        }
        .content .left
        {
            float: left;
            width: 20%;
            border: 1px solid green;
            margin: 3px;
        }
        .content .center
        {
            float: left;
            border: 1px solid green;
            margin: 3px;
            width: 57%;
        }
        .content .right
        {
            float: right;
            width: 20%;
            border: 1px solid green;
            margin: 3px;
        }
        .mo
        {
            height: auto;
            border: 1px solid #CCC;
            margin: 3px;
            background: #ffffff;
        }
        .mo h1
        {
            background: #f2f7fb;
            height: 18px;
            padding: 3px;
            cursor: move;
        }
        .mo .nr
        {
            height: 200px;
            border: 1px solid #F3F3F3;
            margin: 2px;
        }
        h1
        {
            margin: 0px;
            padding: 0px;
            text-align: left;
            font-size: 12px;
            height: 20px;
        }
        h1 span
        {
            float: left;
        }
        h1 font
        {
            float: right;
            cursor: pointer;
        }
    </style>

    <script type="text/javascript" src="../Scripts/yui_2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="../Scripts/yui_2.9.0/build/element/element-min.js"></script>
    <script type="text/javascript" src="../Scripts/yui_2.9.0/build/datasource/datasource-min.js"></script>
    <!-- OPTIONAL: JSON Utility (for DataSource) -->
    <script type="text/javascript" src="../Scripts/yui_2.9.0/build/json/json-min.js"></script>
    <!-- OPTIONAL: Connection Manager (enables XHR for DataSource) -->
    <script type="text/javascript" src="../Scripts/yui_2.9.0/build/connection/connection-min.js"></script>
    <!-- OPTIONAL: Get Utility (enables dynamic script nodes for DataSource) -->
    <script type="text/javascript" src="../Scripts/yui_2.9.0/build/get/get-min.js"></script>
    <!-- OPTIONAL: Drag Drop (enables resizeable or reorderable columns) -->
    <script type="text/javascript" src="../Scripts/yui_2.9.0/build/dragdrop/dragdrop-min.js"></script>
    <!-- OPTIONAL: Calendar (enables calendar editors) -->
    <%--<script type="text/javascript" src="../Scripts/yui_2.9.0/build/calendar/calendar-min.js"></script>--%>
    <!-- Source files -->
    <script type="text/javascript" src="../Scripts/yui_2.9.0/build/datatable/datatable-min.js"></script>
    <script type="text/javascript" src="../Scripts/yui_2.9.0/build/paginator/paginator-min.js"></script>
    <script type="text/javascript" src="../scripts/yui_2.9.0/build/layout/layout-min.js"></script>
    <script type="text/javascript" src="../scripts/yui_2.9.0/build/button/button-min.js"></script>
    <script type="text/javascript" src="../scripts/yui_2.9.0/build/container/container-min.js"></script>
    <script type="text/javascript" src="../scripts/yui_2.9.0/build/resize/resize-min.js"></script>
    <script type="text/javascript" src="../scripts/yui_2.9.0/build/event-delegate/event-delegate-min.js"></script>
    <script src="../Scripts/yui_3.0/build/yui/yui-min.js" type="text/javascript"></script>

    

<script type="text/javascript">
    YAHOO.namespace("example.container");
    function init() {
        var handleSubmit = function () {

            // var editwindow = document.getElementById("EditUIWindow");
            var editwindow = $("#EditUIWindow");
            if (editwindow) {
                editwindow.contentWindow.Save();
                alert("设置成功");
                this.cancel();
                ReLoadData();
            }

        };
        var handleCancel = function () {
            this.cancel();
        };
        var handleSuccess = function (o) {
            var response = o.responseText;
            response = response.split("<!")[0];
            //document.getElementById("resp").innerHTML = response;
            $("#resp").html(response)
        };
        var handleFailure = function (o) {
            alert("Submission failed: " + o.status);
        };
        var handleCancel1 = function () {
            this.cancel();
        };
        var callback =
    {
        success: handleSuccess1,
        failure: handleFailure1,
        argument: { foo: "foo", bar: "bar" }
    };
        var handleSubmit1 = function () {
            // var editwindow1 = document.getElementById("EditUIWindow1");
            var editwindow1 = $("#EditUIWindow1");
            if (editwindow1) {
                editwindow1.contentWindow.Save();
            }
            alert("设置成功");
            this.cancel();
        };
        var handleSuccess1 = function (o) {
            alert("设置成功");
            this.cancel();
        };
        var handleFailure1 = function (o) {
            alert("操作失败");
        };
        // Remove progressively enhanced content class, just before creating the module
        YAHOO.util.Dom.removeClass("dialog1", "yui-pe-content");
        // Instantiate the Dialog
        YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1",
						{ width: "450px",
						    height: "300px",
						    fixedcenter: true,
						    draggable: true,
						    close: true,
						    visible: false,
						    constraintoviewport: true,
						    buttons: [{ text: "保存", handler: handleSubmit, isDefault: true },
								    { text: "取消", handler: handleCancel}]
						});
        YAHOO.example.container.dialog1.render();
    };
    YAHOO.util.Event.addListener(window, "load", init);
</script>

<script type="text/javascript">
    var dragobj = {}
    window.onerror = function () { return false }
    window.oDel = function (obj) { if ($(obj) != null) { $(obj).parentNode.removeChild($(obj)) } }
    var domid = 300
    function on_ini() {
        String.prototype.inc = function (s) { return this.indexOf(s) > -1 ? true : false }
        var agent = navigator.userAgent
        window.isOpr = agent.inc("Opera")
        window.isIE = agent.inc("IE") && !isOpr
        window.isMoz = agent.inc("Mozilla") && !isOpr && !isIE
        if (isMoz) {
            Event.prototype.__defineGetter__("x", function () { return this.clientX + 2 })
            Event.prototype.__defineGetter__("y", function () { return this.clientY + 2 })
            Event.prototype.__defineGetter__("srcElement", function () { var node = this.target; while (node.nodeType != 1) { node = node.parentNode } return node })
        }
        basic_ini()
    }
    function basic_ini() {
        window.$ = function (obj) { return typeof (obj) == "string" ? document.getElementById(obj) : obj }
        window.oDel = function (obj) { if ($(obj) != null) { $(obj).parentNode.removeChild($(obj)) } }
    }
    window.onload = function () {
        on_ini()
        var o = document.getElementsByTagName("h1")
        for (var i = 0; i < o.length; i++) {
            o[i].onmousedown = addevent
        }
    }
    function addevent(e) {
        if (dragobj.o != null)
            return false
        e = e || event
        var ee = e.srcElement
        if (ee.tagName == "FONT")
            return
        dragobj.o = this.parentNode
        dragobj.xy = getxy(dragobj.o)
        dragobj.xx = new Array((e.x - dragobj.xy[1]), (e.y - dragobj.xy[0]))
        dragobj.o.style.width = dragobj.xy[2] + "px"
        dragobj.o.style.height = dragobj.xy[3] + "px"
        dragobj.o.style.left = (e.x - dragobj.xx[0]) + "px"
        dragobj.o.style.top = (e.y - dragobj.xx[1]) + "px"
        dragobj.o.style.position = "absolute"
        var om = document.createElement("div")
        dragobj.otemp = om
        om.style.width = dragobj.xy[2] + "px"
        om.style.height = dragobj.xy[3] + "px"
        dragobj.o.parentNode.insertBefore(om, dragobj.o)
        return false
    }
    document.onselectstart = function () { return false }
    window.onfocus = function () { document.onmouseup() }
    window.onblur = function () { document.onmouseup() }
    document.onmouseup = function () {
        if (dragobj.o != null) {
            dragobj.o.style.width = "auto"
            dragobj.o.style.height = "auto"
            dragobj.otemp.parentNode.insertBefore(dragobj.o, dragobj.otemp)
            dragobj.o.style.position = ""
            oDel(dragobj.otemp)
            dragobj = {}
        }
    }
    document.onmousemove = function (e) {
        e = e || event
        if (dragobj.o != null) {
            dragobj.o.style.left = (e.x - dragobj.xx[0]) + "px"
            dragobj.o.style.top = (e.y - dragobj.xx[1]) + "px"
            createtmpl(e)
        }
    }
    function getxy(e) {
        var a = new Array()
        var t = e.offsetTop;
        var l = e.offsetLeft;
        var w = e.offsetWidth;
        var h = e.offsetHeight;
        while (e = e.offsetParent) {
            t += e.offsetTop;
            l += e.offsetLeft;
        }
        a[0] = t; a[1] = l; a[2] = w; a[3] = h
        return a;
    }
    function inner(o, e) {
        var a = getxy(o)
        if (e.x > a[1] && e.x < (a[1] + a[2]) && e.y > a[0] && e.y < (a[0] + a[3])) {
            if (e.y < (a[0] + a[3] / 2))
                return 1;
            else
                return 2;
        } else
            return 0;
    }
    function createtmpl(e) {
        for (var i = 0; i < domid; i++) {
            if (!$("m" + i))
                continue
            if ($("m" + i) == dragobj.o)
                continue
            var b = inner($("m" + i), e)
            if (b == 0)
                continue
            dragobj.otemp.style.width = $("m" + i).offsetWidth
            if (b == 1) {
                $("m" + i).parentNode.insertBefore(dragobj.otemp, $("m" + i))
            } else {
                if ($("m" + i).nextSibling == null) {
                    $("m" + i).parentNode.appendChild(dragobj.otemp)
                } else {
                    $("m" + i).parentNode.insertBefore(dragobj.otemp, $("m" + i).nextSibling)
                }
            }
            return
        }
        for (var j = 0; j < 3; j++) {
            if ($("dom" + j).innerHTML.inc("div") || $("dom" + j).innerHTML.inc("DIV"))
                continue
            var op = getxy($("dom" + j))
            if (e.x > (op[1] + 10) && e.x < (op[1] + op[2] - 10)) {
                $("dom" + j).appendChild(dragobj.otemp)
                dragobj.otemp.style.width = (op[2] - 10) + "px"
            }
        }
    }
    var _fn;
    function add_div(itemName, src) {
        var o = document.createElement("div")
        o.className = "mo"
        o.id = "m" + domid
        $('dom0').appendChild(o)
        o.innerHTML = "<h1><span id=dom" + domid + " IsDefalt=0  src='" + src + "'>" + itemName + "</span><font onclick='del_div(this)'>x</font></h1><div class=nr></div>"
        o.getElementsByTagName("h1")[0].onmousedown = addevent
        domid++
    }
    function del_div(obj) {
        var o = obj.parentNode.parentNode
        oDel(o);
        $('dom0').appendChild(o);
    }

    //保存配置
    var modelItem = function () {
        itemName
    }
    var fnSave = function () {
        var modelItem = null;
        var sort, itemName;
        var items = [];
        //保存左侧模块
        var domCenter = document.getElementById("dom1");
        for (var i = 1; i < domCenter.children.length; i++) {
            modelItem = new Object();
            modelItem.sort = i;
            modelItem.DesktopItemID = domCenter.children[i].getAttribute("DesktopItemID");
            modelItem.Region = "center";
            items.push(modelItem);
        }
        var handleSuccess2 = function () {
            alert('设置桌面成功');
        }
        var handleFailure2 = function () {
            alert('设置失败');
        }
        var callback =
        {
            success: handleSuccess2,
            failure: handleFailure2,
            argument: { foo: "foo", bar: "bar" }
        };

        //保存右侧模块
        var domRight = document.getElementById("dom2");
        for (var j = 1; j < domRight.children.length; j++) {
            modelItem = new Object();
            modelItem.DesktopItemID = domRight.children[j].getAttribute("DesktopItemID");
            modelItem.sort = j;
            modelItem.Region = "right";
            items.push(modelItem);
        }
        if (domCenter.children.length <= 1 && domRight.children.length <= 1) {
            alert("至少保留一个桌面项!");
            return;
        } else {
            var url = "../Extend/AjaxData/DataProcessin.aspx";
            var json = jQuery.toJSON(items);
            var jsonStr = YAHOO.lang.JSON.stringify(json, ["ItemName", "Region", "Sort"]);
            document.getElementById("jsonDataContent").value = json;
            var formObject = document.getElementById('form2');
            YAHOO.util.Connect.setForm(formObject);
            var cObj = YAHOO.util.Connect.asyncRequest('POST', url + "?action=Save&entity=Set_UserDesktopItem&r=" + Math.random(), callback);
        }
    }

    //查看
    var fnShow = function () {
        var pagetitle = '主页';
        parent.$("#tabs").tabs('close', pagetitle); ;
        parent.addTabs(pagetitle, "../DeskTop/main.aspx?r=" + Math.random());
    }
</script>


</head>
<body class="yui-skin-sam">
    <input type="button" value="保存设置" onclick="fnSave();" />
    <input type="button" value="查看效果" onclick="fnShow();" />

    <div class="content">
        <div class="left" id="dom0">
            <span style="background-color: #ECF9FF">可用模块</span>
            <asp:Literal ID="lblContent" runat="server"></asp:Literal>
        </div>

        <div class="center" id="dom1">
            <span style="background-color: #ECF9FF">中间模块</span>
            <asp:Literal ID="lblCenterModel" runat="server"></asp:Literal>
        </div>
        <div class="right" id="dom2">
            <span style="background-color: #ECF9FF">右侧模块</span>
            <asp:Literal ID="lblRightModel" runat="server"></asp:Literal>
        </div>
    </div>
    <form id="form2" action="">
    <textarea style="display: none" id="jsonDataContent" rows="2" cols="2" name="jsonDataContent"></textarea>
    </form>
</body>
</html>